<template>
  <div class="clinic-container">
    <!-- 顶部操作栏 -->
    <div class="header-actions">
      <div class="left-actions">
        <el-button icon="el-icon-arrow-left" @click="handleBack">返回</el-button>
      </div>
      <div class="right-actions">
        <el-button type="primary" icon="el-icon-plus" @click="handleAddMember">新增成员</el-button>
        <el-button type="primary" icon="el-icon-check" @click="handleSave">保存</el-button>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧头像区域 -->
      <div class="avatar-section">
        <div class="avatar-uploader">
          <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="staffInfo.avatar" :src="staffInfo.avatar" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <div class="upload-tip">点击更换头像</div>
        </div>
      </div>

      <!-- 右侧信息区域 -->
      <div class="info-section">
        <!-- 基本信息 -->
        <div class="basic-info">
          <div class="staff-name">{{ staffInfo.staffName }}</div>
          <div class="phone-input">
            <el-input 
              v-model="staffInfo.phone" 
              placeholder="请输入电话号码"
              :prefix-icon="phonePrefix">
              <template slot="prepend">+86</template>
            </el-input>
          </div>
        </div>

        <!-- 角色和权限 -->
        <div class="role-permission-section">
          <h3 class="section-title">角色和权限</h3>
          
          <!-- 角色选择 -->
          <div class="role-section">
            <h4 class="sub-title">他的角色</h4>
            <el-checkbox-group v-model="staffInfo.roles">
              <el-checkbox label="医生"></el-checkbox>
              <el-checkbox label="护士"></el-checkbox>
              <el-checkbox label="检验技师"></el-checkbox>
              <el-checkbox label="理疗师"></el-checkbox>
              <el-checkbox label="医助"></el-checkbox>
            </el-checkbox-group>
          </div>

          <!-- 权限模块 -->
          <div class="permission-section">
            <h4 class="sub-title">他的权限模块</h4>
            <el-checkbox-group v-model="staffInfo.permissions">
              <el-checkbox label="门诊"></el-checkbox>
              <el-checkbox label="患者-患者档案"></el-checkbox>
              <el-checkbox label="患者-患者随访"></el-checkbox>
            </el-checkbox-group>
            <el-button type="text" class="modify-btn">修改</el-button>
          </div>
        </div>

        <!-- 助理医生 -->
        <div class="assistant-section">
          <div class="section-header">
            <h3 class="section-title">他助理哪些医生</h3>
            <el-button type="text" class="modify-btn">修改</el-button>
          </div>
          <p class="assistant-desc">医助可以看到他助理的医生名下所有患者，帮助医生预约、问诊、回复咨询</p>
        </div>

        <!-- 企业微信账号 -->
        <div class="wechat-section">
          <div class="section-header">
            <h3 class="section-title">他的企业微信账号</h3>
            <el-button type="primary" class="bind-btn">绑定</el-button>
          </div>
        </div>

        <!-- 国家医保信息 -->
        <div class="medical-insurance-section">
          <div class="section-header">
            <h3 class="section-title">国家医保信息</h3>
          </div>
          <p class="insurance-desc">填写后才可正常使用医保刷卡</p>
          
          <div class="insurance-form">
            <el-form :model="staffInfo" label-width="120px">
              <el-form-item label="医保人员代码">
                <el-input v-model="staffInfo.medicalCode" placeholder="请输入医保人员代码"></el-input>
                <el-link type="primary" class="help-link">如何查询本机构人员的医保代码?</el-link>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Clinic',
  data() {
    return {
      staffInfo: {
        staffName: '小管家',
        phone: '13456453456',
        avatar: '',
        roles: ['医助'],
        permissions: ['门诊', '患者-患者档案'],
        medicalCode: ''
      },
      phonePrefix: 'el-icon-phone'
    };
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
    },
    handleSave() {
      this.$message.success('保存成功');
    },
    handleAddMember() {
      this.$message.info('新增成员功能');
    },
    handleAvatarSuccess(res, file) {
      this.staffInfo.avatar = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style lang="less" scoped>
.clinic-container {
  // height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;

  .header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e6e6e6;
  }

  .main-content {
    display: flex;
    flex: 1;
    overflow: hidden;

    .avatar-section {
      width: 200px;
      margin-right: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .avatar-uploader {
        text-align: center;
        margin-bottom: 20px;

        /deep/ .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          width: 120px;
          height: 120px;
          display: flex;
          justify-content: center;
          align-items: center;

          &:hover {
            border-color: #409EFF;
          }
        }

        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
        }

        .avatar {
          width: 120px;
          height: 120px;
          display: block;
          object-fit: cover;
        }

        .upload-tip {
          margin-top: 10px;
          font-size: 12px;
          color: #909399;
        }
      }
    }

    .info-section {
      flex: 1;
      overflow-y: auto;
      padding-right: 10px;

      .basic-info {
        margin-bottom: 30px;

        .staff-name {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 15px;
          color: #303133;
        }

        .phone-input {
          width: 300px;

          /deep/ .el-input-group__prepend {
            background-color: #f5f7fa;
            color: #909399;
            user-select: none;
          }
        }
      }

      .role-permission-section,
      .assistant-section,
      .wechat-section,
      .medical-insurance-section {
        background: #fff;
        border-radius: 4px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .section-title {
          font-size: 16px;
          color: #303133;
          margin-bottom: 15px;
        }

        .sub-title {
          font-size: 14px;
          color: #606266;
          margin-bottom: 10px;
        }
      }

      .role-permission-section {
        .role-section,
        .permission-section {
          margin-bottom: 20px;

          /deep/ .el-checkbox {
            margin-right: 25px;
            margin-bottom: 10px;
          }
        }

        .permission-section {
          position: relative;

          .modify-btn {
            position: absolute;
            top: 0;
            right: 0;
          }
        }
      }

      .assistant-section {
        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
        }

        .assistant-desc {
          font-size: 13px;
          color: #909399;
          margin: 0;
        }
      }

      .wechat-section {
        .section-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }

      .medical-insurance-section {
        .insurance-desc {
          font-size: 13px;
          color: #909399;
          margin-bottom: 15px;
        }

        .insurance-form {
          /deep/ .el-form-item {
            margin-bottom: 15px;
          }

          .help-link {
            font-size: 12px;
            margin-top: 5px;
          }
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: 768px) {
  .clinic-container {
    padding: 10px;
    
    .main-content {
      flex-direction: column;
      
      .avatar-section {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
      }
    }
  }
}
</style>